<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { luckDrawApi } from '@/api/controller';
  import { ToastSuccess, ToastWarning, Toastloading, allNumber } from '@/utils/public';
  import xmImage from '@/components/xmImage/index.vue';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import { ElMessageBox } from 'element-plus';
  const action = reactive({
    total:0,
    max_in:0,
    max_out:0,
    list:[] as any[],
    formSet:false,
  })
  interface formQuert {
    draw_num_1:number
    draw_img_1a:string
    draw_img_1b:string
    draw_total_1:number
    draw_price_1:number
    draw_num_2:number
    draw_img_2a:string
    draw_img_2b:string
    draw_total_2:number
    draw_price_2:number
    draw_num_3:number
    draw_img_3a:string
    draw_img_3b:string
    draw_total_3:number
    draw_price_3:number
    price:number
    need_num:number
  }
  const configForm = reactive({
    draw_num_1:0,
    draw_img_1a:'',
    draw_img_1b:'',
    draw_total_1:0,
    draw_price_1:0,
    draw_num_2:0,
    draw_img_2a:'',
    draw_img_2b:'',
    draw_total_2:0,
    draw_price_2:0,
    draw_num_3:0,
    draw_img_3a:'',
    draw_img_3b:'',
    draw_total_3:0,
    draw_price_3:0,
    price:0,
    need_num:0,
  }) as formQuert
  const handleSerach = () => {
    getList();
  };
  const openForm = ()=>{
    action.formSet = true
  }
  const handleConfigSubmit = async()=>{
    action.formSet = false
    const {
      draw_num_1=0, draw_num_2=0, draw_num_3=0,
      draw_img_1a='', draw_img_1b='',
      draw_img_2a='', draw_img_2b='',
      draw_img_3a='', draw_img_3b='',
    } = configForm
    if(!draw_num_1) return ToastWarning('档位一参与次数不可为空')
    if(!draw_img_1a) return ToastWarning('档位一参与按钮图片不可为空')
    if(!draw_img_1b) return ToastWarning('档位一抽再次取按钮图片不可为空')
    if(!draw_num_2) return ToastWarning('档位二参与次数不可为空')
    if(!draw_img_2a) return ToastWarning('档位二参与按钮图片不可为空')
    if(!draw_img_2b) return ToastWarning('档位二抽再次取按钮图片不可为空')
    if(!draw_num_3) return ToastWarning('档位三参与次数不可为空')
    if(!draw_img_3a) return ToastWarning('档位三参与按钮图片不可为空')
    if(!draw_img_3b) return ToastWarning('档位三抽再次取按钮图片不可为空')
    const form = {
      draw_num_1, draw_num_2, draw_num_3,
      draw_img_1a, draw_img_1b,
      draw_img_2a, draw_img_2b,
      draw_img_3a, draw_img_3b,
    }
    const loading = Toastloading()
    await luckDrawApi.wishWheelSetDrawNum(form).then(()=>{
      ToastSuccess('保存成功')
      loading.close()
    }).catch(()=>{
      loading.close()
    })
  }
  const handleNumSubmit = ()=>{
    ElMessageBox.prompt('数量', '单次参与消耗数量', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern:/^\+?[1-9][0-9]*$/,
      inputPlaceholder:'请填写单次参与消耗数量',
      inputErrorMessage: '请填写正整数单次参与消耗数量',
    })
      .then(async({ value }) => {
        const loading = Toastloading()
        await luckDrawApi.wishWheelSetNeedNum({need_num:value})
        loading.close()
        getList()
        ToastSuccess('设置成功')
      }).catch(() => { })
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await luckDrawApi.wishWheelConfig()
    loading.close()
    const { data={} } = res || {}
    console.log(data)
    Object.assign(configForm,{
      ...data,
      draw_total_1:0,
      draw_price_1:0,
      draw_total_2:0,
      draw_price_2:0,
      draw_total_3:0,
      draw_price_3:0,
    })
    configForm.draw_total_1 = configForm.draw_num_1 * configForm.need_num
    configForm.draw_price_1 = configForm.draw_total_1 * configForm.price
    configForm.draw_total_2 = configForm.draw_num_2 * configForm.need_num
    configForm.draw_price_2 = configForm.draw_total_2 * configForm.price
    configForm.draw_total_3 = configForm.draw_num_3 * configForm.need_num
    configForm.draw_price_3 = configForm.draw_total_3 * configForm.price
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <el-button type="primary" @click="handleSerach">刷新</el-button>
          <el-button v-if="!action.formSet" type="primary" @click="openForm">编辑档位</el-button>
          <el-button v-if="action.formSet" type="primary" @click="handleConfigSubmit">保存更改</el-button>
          <el-button type="primary" @click="handleNumSubmit">编辑单次消耗数量</el-button>
        </div>
      </div>
    </div>
    <div class="labelBox TablelabelBox xm-mb10">
      <div class="labelItem">
        <div class="label">单次参与消耗数量：</div>{{ configForm.need_num }}
      </div>
    </div>
    <div class="xm-main xm-TableCenter">
      <el-descriptions
        title="档位一"
        :column="5"
        border
      >
        <el-descriptions-item width="100" label="参与次数">
          <template v-if="!action.formSet">
            {{ configForm.draw_num_1 }}
          </template>
          <el-input v-if="action.formSet" v-model="configForm.draw_num_1" placeholder="请输入单次使用许愿卡数量" />
        </el-descriptions-item>
        <el-descriptions-item width="100" label="张数">
          {{ configForm.draw_total_1 }}
        </el-descriptions-item>
        <el-descriptions-item width="100" label="消耗钻石数">
          {{ configForm.draw_price_1 }}
        </el-descriptions-item>
        <el-descriptions-item label="参与按钮">
          <xmImage v-if="!action.formSet" style="width: 120px;" :src="configForm.draw_img_1a" :list="[configForm.draw_img_1a]" />
          <xmUpload v-if="action.formSet" v-model:file-url="configForm.draw_img_1a" />
        </el-descriptions-item>
        <el-descriptions-item label="再次参与按钮">
          <xmImage v-if="!action.formSet" style="width: 120px;" :src="configForm.draw_img_1b" :list="[configForm.draw_img_1b]" />
          <xmUpload v-if="action.formSet" v-model:file-url="configForm.draw_img_1b" />
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        title="档位二"
        :column="5"
        border
        style="margin-top: 50px;"
      >
        <el-descriptions-item width="100" label="参与次数">
          <template v-if="!action.formSet">
            {{ configForm.draw_num_2 }}
          </template>
          <el-input v-if="action.formSet" v-model="configForm.draw_num_2" placeholder="请输入参与次数" />
        </el-descriptions-item>
        <el-descriptions-item width="100" label="张数">
          {{ configForm.draw_total_2 }}
        </el-descriptions-item>
        <el-descriptions-item width="100" label="消耗钻石数">
          {{ configForm.draw_price_2 }}
        </el-descriptions-item>
        <el-descriptions-item label="参与按钮">
          <xmImage v-if="!action.formSet" style="width: 120px;" :src="configForm.draw_img_2a" :list="[configForm.draw_img_2a]" />
          <xmUpload v-if="action.formSet" v-model:file-url="configForm.draw_img_2a" />
        </el-descriptions-item>
        <el-descriptions-item label="再次参与按钮">
          <xmImage v-if="!action.formSet" style="width: 120px;" :src="configForm.draw_img_2b" :list="[configForm.draw_img_2b]" />
          <xmUpload v-if="action.formSet" v-model:file-url="configForm.draw_img_2b" />
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        title="档位三"
        :column="5"
        border
        style="margin-top: 50px;"
      >
        <el-descriptions-item width="100" label="参与次数">
          <template v-if="!action.formSet">
            {{ configForm.draw_num_3 }}
          </template>
          <el-input v-if="action.formSet" v-model="configForm.draw_num_3" placeholder="请输入参与次数" />
        </el-descriptions-item>
        <el-descriptions-item width="100" label="张数">
          {{ configForm.draw_total_3 }}
        </el-descriptions-item>
        <el-descriptions-item width="100" label="消耗钻石数">
          {{ configForm.draw_price_3 }}
        </el-descriptions-item>
        <el-descriptions-item label="参与按钮">
          <xmImage v-if="!action.formSet" style="width: 120px;" :src="configForm.draw_img_3a" :list="[configForm.draw_img_3a]" />
          <xmUpload v-if="action.formSet" v-model:file-url="configForm.draw_img_3a" />
        </el-descriptions-item>
        <el-descriptions-item label="再次参与按钮">
          <xmImage v-if="!action.formSet" style="width: 120px;" :src="configForm.draw_img_3b" :list="[configForm.draw_img_3b]" />
          <xmUpload v-if="action.formSet" v-model:file-url="configForm.draw_img_3b" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
